<template>
  <!-- 搜索条件 -->
  <el-card class="top">
    <el-form class="search-form">
      <div class="top-left">
        <!-- 姓名 -->
        <el-form-item label="姓名：" prop="name">
          <el-input
              v-model="searchDataForm.name"
              clearable
              :prefix-icon="User"
              placeholder="请你输入搜索姓名"
          />
        </el-form-item>
        <!-- 学号 -->
        <el-form-item label="学号：" prop="studentNumber">
          <el-input
              v-model="searchDataForm.studentNumber"
              clearable
              :prefix-icon="Postcard"
              placeholder="请你输入搜索学号"
          />
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="手机号：" prop="phone">
          <el-input
              v-model="searchDataForm.phone"
              clearable
              :prefix-icon="Iphone"
              placeholder="请你输入搜索手机号"
          />
        </el-form-item>
        <!-- 筛查结果 -->
        <el-form-item label="筛查结果：" prop="contactScreening">
          <el-select v-model="searchDataForm.contactScreening" style="width: 200px"
                     placeholder="请你选择搜索筛查结果">
            <el-option v-for="item in contactScreeningOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                       clearable
                       filterable
            />
          </el-select>
        </el-form-item>
      </div>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="searchForm">
          搜索
        </el-button>
        <el-button @click="resetForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 展示数据 -->
  <el-card class="bottom">
    <!-- 表格展示用户信息 -->
    <el-table style="width: 100%" height="50vh"
              class="bottom-table"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="records"
              border
    >
      <!-- 序号 -->
      <el-table-column fixed="left" type="index" label="#" width="50"/>
      <!-- 姓名 -->
      <el-table-column sortable
                       prop="name"
                       label="姓名"
                       width="100"
                       show-overflow-tooltip
      />
      <!-- 性别 -->
      <el-table-column sortable
                       prop="sexText"
                       label="性别"
                       width="80"
                       show-overflow-tooltip
      />
      <!-- 年龄 -->
      <el-table-column sortable
                       prop="age"
                       label="年龄"
                       width="80"
                       show-overflow-tooltip
      />
      <!-- 学号 -->
      <el-table-column sortable
                       prop="studentNumber"
                       label="学号"
                       width="120"
                       show-overflow-tooltip
      />
      <!-- 手机号 -->
      <el-table-column sortable
                       prop="phone"
                       label="手机号"
                       width="120"
                       show-overflow-tooltip
      />
      <!-- 学院 -->
      <el-table-column sortable
                       prop="college"
                       label="学院"
                       width="180"
                       show-overflow-tooltip
      />
      <!-- 专业 -->
      <el-table-column sortable
                       prop="major"
                       label="专业"
                       width="180"
                       show-overflow-tooltip
      />
      <!-- 班级 -->
      <el-table-column sortable
                       prop="grade"
                       label="班级"
                       width="80"
                       show-overflow-tooltip
      />
      <!-- 紧急联系人 -->
      <el-table-column sortable
                       prop="emergencyContacts"
                       label="紧急联系人"
                       width="180"
                       show-overflow-tooltip
      />
      <!-- 紧急联系人电话 -->
      <el-table-column sortable
                       prop="contactPhone"
                       label="紧急联系人电话"
                       width="180"
                       show-overflow-tooltip
      />
      <!-- 填报日期 -->
      <el-table-column sortable
                       prop="fillDate"
                       label="填报日期"
                       show-overflow-tooltip
                       width="180"
      />
      <!-- 接触者筛查结果 -->
      <el-table-column sortable fixed="right"
                       prop="contactScreeningText"
                       label="筛查结果"
                       show-overflow-tooltip
                       width="120"
      />
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:current-page="pageNum"
                   v-model:page-size="pageSize"
                   :page-sizes="[5, 10, 15, 20]"
                   :background="true"
                   layout="prev, pager, next, jumper,->,sizes,total"
                   :total="totalRow"
                   @current-change="searchForm"
                   @size-change="searchForm"
    />
  </el-card>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {Iphone, Postcard, User} from "@element-plus/icons-vue";
import {pageDailyHealthInfoReq} from "@/api/record/health.ts";

interface SearchData {
  name: string
  studentNumber: string
  phone: string
  contactScreening: string
}

interface Records {
  id: string
  name: string
  sex: string
  sexText: string
  studentNumber: string
  age: string
  college: string
  major: string
  grade: string
  phone: string
  emergencyContacts: string
  contactPhone: string
  fillDate: string
  contactScreening: string
  contactScreeningText: string
}

const contactScreeningOption = [
  {
    value: '',
    label: ''
  },
  {
    value: '1',
    label: '阳性'
  },
  {
    value: '2',
    label: '阴性'
  },
  {
    value: '3',
    label: '无症状'
  }
]

// 默认页码
const pageNum = ref<number>(1);
// 默认每页条数
const pageSize = ref<number>(10);
// 总条数
const totalRow = ref<number>(0);
// 存储图书数据
const records = ref<Records[]>([]);
// 搜索条件
const searchDataForm = reactive<SearchData>({
  name: '',
  studentNumber: '',
  phone: '',
  contactScreening: ''
})

// 初始化
onMounted(() => {
  pageDailyHealthInfo()
})

// 分页
const pageDailyHealthInfo = async () => {
  const data = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  const result: any = await pageDailyHealthInfoReq(data)
  if (result.code === 1000_0000) {
    totalRow.value = result.data.totalRow
    records.value = result.data.records
  }
}

// 搜索表单
const searchForm = async () => {
  const data = {
    name: searchDataForm.name,
    studentNumber: searchDataForm.studentNumber,
    phone: searchDataForm.phone,
    contactScreening: searchDataForm.contactScreening,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  const result: any = await pageDailyHealthInfoReq(data)
  if (result.code === 1000_0000) {
    totalRow.value = result.data.totalRow
    records.value = result.data.records
  }
}
// 重置表单
const resetForm = () => {
  searchDataForm.name = ''
  searchDataForm.studentNumber = ''
  searchDataForm.phone = ''
  searchDataForm.contactScreening = ''
}

</script>

<style lang="scss">
.top {
  margin-bottom: 2vh;

  .top-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
  }

  .search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;

      .el-input {
        width: 220px;
      }
    }
  }
}


.book-info-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;

  .image {
    display: block;
    height: 40vh;
  }

  .card-item {
    .card-body {
      padding: 0;

      .el-row {
        height: 32px;
      }
    }
  }

  .bottom {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    align-items: center;
    justify-items: center;

    .bottom-left {
      grid-row: 1;
      grid-column: 1;
    }

    .bottom-right-right {
      grid-row: 1;
      grid-column: 6/6;
    }
  }

}

.page-bottom {
  margin-top: 2vh;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.dialog-container {
  display: flex;

  .dialog-container-left {
    margin: 0 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog-container-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}


.bottom {

  .bottom-table {
    margin: 2vh 0;

    .unfold-card {
      background-color: rgba(135 206 250 / .5);

      .unfold {
        width: 40%;
        display: flex;
        justify-content: space-between;

        p:first-child {
          margin-top: 0;
        }
      }
    }
  }
}
</style>
